<template>
  <el-card v-loading="loading">
    <base-form mode="edit" :form="form" @submit="handleSubmit" @cancel="handleCancel" />
  </el-card>
</template>

<script>
import { templateInfo, updateTemplate } from '@/api/wxTemplateMsg'
import BaseForm from './components/form'

export default {
  name: 'Edit',
  components: { BaseForm },
  props: ['id'],
  data() {
    return {
      loading: false,
      form: undefined
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      templateInfo(this.id).then(res => {
        const form = res.data.detail
        form.keywords = res.data.keywords
        this.form = form
      })
    },
    handleCancel() {
      this.$router.back()
    },
    handleSubmit(data) {
      const formData = {
        detail: data,
        keywords: data.keywords
      }
      this.loading = true
      updateTemplate(formData).then(res => {
        this.loading = false
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '编辑成功',
            type: 'success',
            duration: 2000
          })
          this.$router.back()
        } else {
          this.$notify({
            title: 'error',
            message: res.msg || res.message,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-input {
    width: 300px;
  }
</style>
